import React, { useRef, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { chinaBorderPoint } from "./chinaBorderPoint";
import { chinaMapStyle } from "./chinaMapStyle";
import { throttle } from "lodash-es";

import "./Chart9.less";

function App() {
  const mapCharts = useRef(null);
  const data = [
    { name: "海门", value: 42 },
    { name: "鄂尔多斯", value: 25 },
    { name: "招远", value: 23 },
    { name: "舟山", value: 12 },
    { name: "齐齐哈尔", value: 8 },
    { name: "盐城", value: 6 },
    { name: "赤峰", value: 6 },
    { name: "青岛", value: 3 },
  ];
  const geoCoordMap = {
    海门: [121.15, 31.89],
    鄂尔多斯: [109.781327, 39.608266],
    招远: [120.38, 37.35],
    舟山: [122.207216, 29.985295],
    齐齐哈尔: [123.97, 47.33],
    盐城: [120.13, 33.38],
    赤峰: [118.87, 42.28],
    青岛: [120.33, 36.07],
  };

  const convertData = (data) => {
    let res = [];
    for (let i = 0; i < data.length; i++) {
      let geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };

  let option = {
    tooltip: {
      trigger: "item",
    },
    bmap: {
      center: [121.478815, 31.233212],
      zoom: 5,
      roam: true,
      mapStyle: {
        styleJson: chinaMapStyle,
      },
    },
    series: [
      {
        name: "省市",
        type: "scatter",
        coordinateSystem: "bmap",
        data: convertData(data),
        symbolSize: (val) => {
          const value = val[2];
          if (value >= 25) {
            return 40;
          } else if (value >= 16) {
            return 25;
          } else if (value < 16) {
            return 16;
          }
        },
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.3, 0.3, 1, [
            {
              offset: 0,
              color: "rgb(251, 118, 123)",
            },
            {
              offset: 1,
              color: "rgb(204, 46, 72)",
            },
          ]),
          //   color: "#3244e8",
        },
        encode: {
          value: 2,
        },
        label: {
          formatter: (item) => {
            return item.value[2] >= data[4].value ? item.value[2] : "";
          },
          position: "inside",
          show: true,
          fontSize: 10,
          offset: [0, 1],
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //   },
        // },
      },
    ],
  };

  // useEffect(() => {
  //   const myChart = mapCharts.current.getEchartsInstance();
  //   let bmap = myChart.getModel().getComponent("bmap").getBMap();
  //   const getZoomFunc = throttle(() => {
  //     let zoom = bmap.getZoom();
  //   }, 100);
  //   bmap.addEventListener("zoomend", getZoomFunc);
  //   return () => {
  //     bmap.removeEventListener("zoomend", getZoomFunc);
  //   };
  // }, []);

  //   useEffect(() => {
  //     const myChart = mapCharts.current;
  //     //   let map =
  //     //     myChart &&
  //     //     myChart.getEchartsInstance().getModel().getComponent("bmap").getBMap();
  //     //   drawBoundary(map);
  //     //   myChart.getEchartsInstance().setOption(option);

  //     // myChart.getEchartsInstance().on("bmaproam", (params) => {
  //     //   //这里是bmaproam方法，其余都一样
  //     //   console.log(
  //     //     "%c 🍾 params: ",
  //     //     "font-size:20px;background-color: #2EAFB0;color:#fff;",
  //     //     params
  //     //   );
  //     //   //   let _option = myChart.getEchartsInstance().getOption();
  //     //   //   console.log('%c 🥟 _option: ', 'font-size:20px;background-color: #EA7E5C;color:#fff;', _option);
  //     //   //   // let _zoom = _option.bmap[0].zoom;

  //     //   //   // myChart.clear();
  //     //   //   drawBoundary(map)
  //     //   //   myChart.getEchartsInstance().setOption(_option);

  //     //   // drawBoundary(map)
  //     // });
  //   }, []);

  useEffect(() => {
    const myChart = mapCharts?.current?.getEchartsInstance();
    let map = myChart && myChart.getModel().getComponent("bmap").getBMap();
    setTimeout(() => {
      drawBoundary(map);
    }, 100);

    // drawBoundary(map);
    // myChart.setOption({
    //   bmap: {
    //     center: [121.478815, 31.233212],
    //     zoom: 5,
    //     roam: true,
    //     mapStyle: {
    //       styleJson: chinaMapStyle,
    //     },
    //   },
    // });
    // map.setZoom(5);

    function test() {
      drawBoundary(map);
    }

    map.addEventListener("zoomstart", test);

    // map.addEventListener("zoomstart", function () {
    //   // console.log(123);
    //   // drawBoundary(map); //绘制中国区域行政边界
    // });

    return () => {
      map.removeEventListener("zoomstart", test);
    };
  }, []);

  //绘制中国区域行政边界
  function drawBoundary(map) {
    /*画遮蔽层的相关方法
     *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
     *      这样就做出了一个经过多次西北角的闭合多边形*/
    //定义中国东南西北端点，作为第一层
    //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
    let pStart = new BMap.Point(180, 90);
    let pEnd = new BMap.Point(0, -90);
    let pArray = [
      new BMap.Point(pStart.lng, pStart.lat),
      new BMap.Point(pEnd.lng, pStart.lat),
      new BMap.Point(pEnd.lng, pEnd.lat),
      new BMap.Point(pStart.lng, pEnd.lat),
    ];
    //循环添加各闭合区域

    chinaBorderPoint.forEach((value) => {
      pArray.push(new BMap.Point(value[0], value[1]));
    });
    //添加遮蔽层
    let plyall = new BMap.Polygon(pArray, {
      strokeOpacity: 1,
      strokeColor: "#091934",
      strokeWeight: 1,
      fillColor: "#091934",
      fillOpacity: 1,
    }); //建立多边形覆盖物
    map.addOverlay(plyall);

    pStart = new BMap.Point(180, 90);
    pEnd = new BMap.Point(0, -90);
    pArray = [
      new BMap.Point(135.077218, 48.454352),
      new BMap.Point(pStart.lng, pStart.lat),
      new BMap.Point(pStart.lng, pEnd.lat),
      new BMap.Point(135.077218, 48.454352),
    ];
    let boundary = new BMap.Polygon(pArray, {
      strokeOpacity: 1,
      strokeColor: "#091934",
      strokeWeight: 1,
      fillColor: "#091934",
      fillOpacity: 1,
    }); //建立多边形覆盖物
    map.addOverlay(boundary);
  }

  return (
    <>
      <div className="china-map-container">
        <ReactECharts
          ref={mapCharts}
          option={option}
          className="china-map"
          // onEvents={onEvents}
        />
      </div>
    </>
  );
}

export default App;
